<style lang="scss" scoped>
.tags-container {
  padding: 5px;

  .history-search {
    margin-bottom: 10px;
  }
}
</style>
<template>
  <div>
    <van-nav-bar
      left-arrow
      left-text="返回"
      title="搜索商品"
      @click-left="$router.back()"
    />
    <form action="/">
      <van-search
        ref="search"
        v-model="params.name"
        placeholder="请输入搜索关键词"
        show-action
        @cancel="on_cancel"
        @search="on_search"
      />
    </form>
    <div v-if="page_switch === 0" class="tags-container">
      <div>
        <!--    历史搜索及热门搜索    -->
        <div class="history-search">
          <van-row v-if="category_store.history_search.length" gutter="5">
            <van-col span="5">历史搜索:</van-col>
            <van-col>
              <van-tag
                v-for="(item, index) in category_store.history_search"
                closeable
                color="#f7f8fa"
                size="large"
                style="margin-right: 5px"
                text-color="#58727e"
                @click="history_search_click(item)"
                @close="history_search_close(index)"
                >{{ item }}
              </van-tag>
            </van-col>
          </van-row>
        </div>
        <van-row>
          <van-col span="5">热门搜索:</van-col>
          <van-col>
            <van-tag
              v-for="item in get_hot_category"
              color="#f7f8fa"
              size="large"
              style="margin: 5px"
              text-color="#58727e"
              @click="hot_tag_click(item)"
              >{{ item.name }}
            </van-tag>
          </van-col>
        </van-row>
      </div>
    </div>
    <product-card
      v-if="page_switch === 1"
      :product_data="data_list"
    ></product-card>
  </div>
</template>

<script lang="ts" setup>
import { api_search_product } from "@/service/api/search";
import type { params } from "@/service/api/type";
import { computed, nextTick, onMounted, reactive, ref } from "vue";
import ProductCard from "@/components/ProductCard.vue";

import { api_get_product_by_id } from "@/service/api/category";

import { use_category_store } from "@/stores/category-store";
import { storeToRefs } from "pinia";

// 获取根据分类获取的"热门分类"
const category_store = use_category_store();
const { get_hot_category } = storeToRefs(category_store);
let params: params = reactive({
  project_id: 1,
  limit: 999,
  name: "",
});

// 页面切换功能
let page_switch = ref(0);

// 搜索框搜索功能
// 传给商品展示组件的数据
let data_list = ref([]);
// 获取搜索框实例
const search = ref();
const on_search = async () => {
  if (!params.name) return;
  else {
    let res: any = await api_search_product(params);
    page_switch.value = 1;
    // 获取历史搜索的数据
    let history_search_input: string[] = [];
    history_search_input.push(params.name!);
    category_store.history_search = [...new Set(history_search_input)];
    data_list.value = res.result.rows;
  }
};
const on_cancel = () => {
  data_list.value.length = 0;
  params.name = "";
  page_switch.value = 0;
};

// 点击热门搜索以及点击历史搜索标签的行为
// 删除一个历史搜索标签
const history_search_close = (index: number) => {
  category_store.history_search.splice(index, 1);
};
// 点击历史搜索标签
const history_search_click = (item) => {
  params.name = item;
  on_search();
};
const hot_tag_click = async (item) => {
  const id = item.id;
  let res = await api_get_product_by_id(id);
  data_list.value = res.result;
  page_switch.value = 1;
  console.log(res);
};
// 点击热门搜索标签
onMounted(() => {
  search.value.focus();
});
</script>
